<template>
  <div
  class="swiper-container"
  ref="mySwiper"
  @mouseenter="swiperData.autoplay.stop()"
  @mouseleave="swiperData.autoplay.start()"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in list" :key="item.id">
        <img :src="item.imgUrl" style="width: 100%" height="100%" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'Slide',
  props: {
    list: Array
  },
  watch: {
    list: {
      handler () {
        this.$nextTick(() => {
        // eslint-disable-next-line no-new
          this.swiperData = new Swiper(this.$refs.mySwiper, {
          // 设置无缝衔接
            loop: true,
            //  设置自动播放
            autiplay: {
              delay: 3000,
              disableOnInteraction: false
            },
            //  设置轮播效果
            effect: 'fade',
            // 设置分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            }
          })
        })
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 100%;
}
</style>
